<template>
  <!-- 侧边栏 -->
  <el-row class="tac" style="height: auto">
    <el-col>
      <h3
        id="title"
        style="
          font-size: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <el-image :src="logo" fit style="width: 50px; height: 50px"></el-image>
        {{ isCollapse ? "" : "东软智疗" }}
      </h3>

      <el-menu
        default-active="0"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :collapse-transition="False"
      >
        <el-menu-item-group style="text-align: left">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <!-- <span>{{ type }}</span> -->
            <span>医生工作站</span>
          </template>
          <el-menu-item
            :index="index.toString()"
            @click="clickmenu(item)"
            v-for="(item, index) in list"
            :key="index"
            style="
              height: 50px;
              line-height: 50px;
              display: flex;
              justify-content: center;
            "
          >
            <el-icon>
              <component
                :is="item.icon"
                style="width: 25px; height: 25px"
              ></component>
            </el-icon>
            <template #title>{{ item.name }}</template>
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import img from "../../assets/tubiao.png";
export default {
  props: {
    // 控制侧边栏折叠变量
    isCollapse: {
      type: Boolean,
      default: false,
    },
    // 用户id
    user_id: {
      type: Number,
      default: 3,
    },
    // 侧边栏列表
    list: {
      type: Array,
      default: () => [
        { name: "首页", url: "main", icon: "el-icon-s-home" },
        { name: "我的钱包", url: "mywallet", icon: "el-icon-bank-card" },
        { name: "交易记录", url: "record", icon: "el-icon-time" },
        { name: "基金选购", url: "purchase", icon: "el-icon-goods" },
        { name: "资产配置", url: "asset", icon: "el-icon-set-up" },
        { name: "收益明细", url: "detail", icon: "el-icon-s-marketing" },
      ],
    },
  },
  data() {
    return {
      logo: img,
      userType: [
        "量子纠缠人员",
        "挂号收费工作站",
        "医生工作站",
        "医技工作站",
        "药房工作站",
      ],
      False: false,
      Avatar: "Avatar",
    };
  },

  computed: {
    type() {
      return this.userType[
        JSON.parse(window.sessionStorage.getItem("userInfo")).userType
      ];
    },
  },
  methods: {
    clickmenu(item) {
      const path = this.$route.path;
      const baseUrl = "/doctor/"
      if (path.endsWith(item.url)) {
        this.$message.warning("已经在当前页，无法跳转！");
      } else {
        this.$router.push({
          path: baseUrl + item.url,
          // query: { userId: this.user_id },
        });
        this.$emit("posttitle", item.name);
      }
    },
  },
};
</script>

<style>
.horizontal-collapse-transition {
  transition: 0s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
